<template>
  <view>
    <u-cell class="professor-card-cell">
      <u-avatar
        slot="icon"
        shape="square"
        size="140rpx"
        mode="widthFix"
        :src="professorImage"
      ></u-avatar>
      <view slot="title" class="professor-card-view">
        <u-row>
          <u--text
            :text="professor.name"
						size="15"
          ></u--text>
        </u-row>
        <u-row>
          <u--text
            :text="`已约：${professor.appointmentCount} | 好评：${professor.evaluationRating}%`"
            type="info"
						size="12"
          ></u--text>
        </u-row>
        <u-row>
          <u-tag
            :text="professor.area"
            type="success"
						size="mini"
            plain
          ></u-tag>
          <!-- 假数据 -->
          <u-tag
            text="立减20元"
            type="error"
						size="mini"
            plain
          ></u-tag>
        </u-row>
        <u-row>
          <u--text
            :text="`${professor.price}`"
            color="red"
            bold
            mode="price"
          ></u--text>
          <u-button
            class="appointment-button"
            @click="reserve"
            shape="circle"
            type="success"
						size="mini"
            text="立即预约"
          ></u-button>
        </u-row>
      </view>
    </u-cell>
  </view>
</template>

<script>
  import { ROUTE_PATHS } from "@/router/routes";

  export default {
    name: "ProfessorCard",
    props: {
      /**
       * 专家信息
       * @type {Object}
       * @property {string} id 专家id
       * @property {string} name 专家名称
       * @property {string} area 专家领域
       * @property {string} avatarUrl 专家头像
       * @property {number} price 预约专家价格
       * @property {number} appointmentCount 预约次数
       * @property {number} evaluationRating 专家评价
       */
      professor: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {};
    },
    computed: {
      /**
       * 如果专家头像为空，则随机显示一张
       */
      professorImage() {
        if (this.professor?.avatarUrl) {
          return this.professor.avatarUrl;
        }
        const random = Math.floor(Math.random() * 10);
        return `/static/images/professor${random}.png`;
      },
    },
    methods: {
      reserve() {
        this.$Router.push({
          path: ROUTE_PATHS.APPOINTMENT,
          query: {
            professor: this.professor.name,
            id: this.professor.id,
          },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .professor-card-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .professor-card-view {
      display: flex;
			flex-direction: column;
			gap: var(--margin-mini-m);
    }

    .appointment-button {
      font-size: var(--font-size-small);
      width: 180rpx;
			height: 45rpx;
    }

  }
</style>
